<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>
<style>
  [v-cloak] {
    display: none;
    width: 100px;
    height: 100px;
    background-color: aliceblue;
  }
</style>

<body>
  <div id="app">

    <div>
      姓 <input type="text" v-model="firstName">
      <br>
      名 <input type="text" v-model="secondName">
      <br>
      <!-- 全名：{{firstName.toUpperCase() + "--" + secondName.toUpperCase() }} -->
      <!-- 全名：{{toUpperCase()}} -->
      全名：{{fullName}}
      <br>
      {{sayHellow}}
    </div>

  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        firstName: "",
        secondName: ""
      }
    },
    methods: {
      // toUpperCase(){
      //   return  this.firstName.toUpperCase() + "--" + this.secondName.toUpperCase()
      // }
    },
    computed: {
      /* 
      当模板中需要一个数据，是由其他的数据计算得来的，那么我们可以书写一个计算属性来得到这个数据（如果逻辑简单，则可以直接把逻辑写在插值中）

      Vue中的computed配置中的属性称为计算属性。计算属性监视内部使用的其他属性的变化，一旦发生变化，计算属性就要重新计算

      计算属性：
        - 监视一个或多个属性的变化
        - 目的是得到一个值！！！！

      计算属性的优势：
        只有在监视的属性发生变化的时候，计算属性才会重新计算，否则每次使用这个属性的时候，直接读取的是上次计算的缓存结果
*/
      fullName() {
        console.log("fullName 计算属性重新计算了");
        return this.firstName.toUpperCase() + "--" + this.secondName.toUpperCase()
      },
      sayHellow() {
        return this.firstName + "hellow vue"
      }
    }

  })


</script>

</html>